<template>
  <div class="components-container" style="padding: 20px">
    <!-- 标题，描述 -->
    <md-input
      v-model="Article.title"
      icon="el-icon-search"
      name="title"
      placeholder="输入标题"
    >
      标题
    </md-input>
    <br />
    <md-input
      v-model="Article.describe"
      icon="el-icon-search"
      name="describe"
      placeholder="输入描述内容"
    >
      描述内容
    </md-input>
    <br />

    <!-- 编辑器 -->
    <div>
      <tinymce
        v-show="isEdit"
        v-model="Article.content"
        :height="300"
        ref="Tinymce"
      />

      <markdown-editor
        v-show="!isEdit"
        ref="markdown"
        v-model="Article.content"
        language="zh_CN"
        height="400px"
      />
    </div>

    <!-- 动态标签 -->
    <div style="margin-top: 20px">
      <p style="color: #666">选择你的文章标签？</p>
      <el-tag
        :key="i"
        v-for="(tag, i) in Article.tag"
        closable
        :disable-transitions="false"
        @close="handleClose(tag, i)"
        :type="tag.type"
      >
        {{ tag.name }}
      </el-tag>
      <el-input
        class="input-new-tag"
        v-if="inputVisible"
        v-model="inputValue"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-new-tag" size="small" @click="showInput"
        >+ New Tag</el-button
      >
    </div>

    <!-- 按钮 -->
    <div style="margin-top: 50px">
      <!-- <button class="pan-btn blue-btn" @click="submit">提交</button>
      <button class="pan-btn blue-btn" @click="submit">附加选项</button> -->
      <el-button v-waves type="primary" @click="submit"> 提交 </el-button>
      <el-button v-waves type="info" @click="dialogFormVisible = true">
        附加选项
      </el-button>
      <ElButton type="primary" @click="isEdit = !isEdit">切换编辑器</ElButton>
      <el-popconfirm
        style="margin-left: 10px"
        title="确定清空？"
        @onConfirm="empty"
      >
        <el-button slot="reference"> 清空 </el-button>
      </el-popconfirm>
    </div>

    <el-dialog title="附加选项" :visible.sync="dialogFormVisible">
      <el-form :model="Article">
        <el-form-item label="核心技能">
          <el-input v-model="Article.core"></el-input>
        </el-form-item>
        <el-form-item label="链接">
          <el-input v-model="Article.href"></el-input>
        </el-form-item>
        <el-form-item label="git链接">
          <el-input v-model="Article.gitHref"></el-input>
        </el-form-item>
        <el-form-item label="封面">
          <el-upload
            :show-file-list="false"
            :on-success="handleSuccess"
            class="editor-slide-upload"
            action="https://yeqt.top:8443/Blog/uploadImg"
            name="image"
          >
            <img v-if="Article.image" :src="Article.image" class="avatar" />
            <el-button v-else size="small" type="primary"> 点击上传 </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Tinymce from "@/components/Tinymce";
import MdInput from "@/components/MDinput";
import waves from "@/directive/waves/index";
import { addArticle, getAarticle } from "@/api/blog";
import tagType from "@/utils/tagType";

import MarkdownEditor from "@/components/MarkdownEditor";

const defaultArticle = {
  content: "", //内容
  title: "",
  describe: "", //摘要
  tag: [], //标签
  core: "", //核心技能
  href: "", //链接
  image: "", //文件列表
  gitHref: "", //git链接
};
export default {
  name: "TinymceDemo",
  components: { Tinymce, MdInput, MarkdownEditor },
  data() {
    return {
      Article: Object.assign({}, defaultArticle),
      inputVisible: false,
      inputValue: "",
      dialogFormVisible: false,
      imageUrl: "",
      isEdit: true,
    };
  },
  directives: {
    waves,
  },
  created() {
    this.$route.params.id ? this.getArticle(this.$route.params.id) : "";
  },
  destroyed() {
    this.empty();
  },
  watch: {
    isEdit(v1) {
      if (v1) {
        // this.Article.content = this.$refs.markdown.getHtml();
        this.$refs.Tinymce.setContent(this.$refs.markdown.getHtml());
      } else {
        this.$refs.markdown.setHtml(this.Article.content);
      }
    },
  },
  methods: {
    submit() {
      if (this.Article.title && this.Article.content && this.Article.describe) {
        this.isEdit
          ? ""
          : (this.Article.content = this.$refs.markdown.getHtml());
        console.log("test-文章内容", this.Article.content);
        addArticle(this.Article).then((res) => {
          this.$message({
            message: res.msg,
            type: res.code == 20000 ? "success" : "error",
          });
          res.code == 20000 && !this.Article._id
            ? (this.Article._id = res.data._id)
            : "";
        });
      } else {
        this.$message({
          message: "请输入内容：标题，描述，内容不能为空",
          type: "error",
        });
      }
    },
    empty() {
      this.Article = Object.assign({}, defaultArticle);
      this.Article.tag = [];
    },
    getArticle(id) {
      console.log("编辑文章");
      getAarticle({ _id: id }).then((res) => {
        // let {content,describe,title} = res.data
        this.$refs.Tinymce.setContent(res.data.content);
        this.Article = res.data;
      });
    },
    handleClose(tag, i) {
      this.Article.tag.splice(i, 1);
    },

    showInput() {
      this.inputVisible = true;
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue;
      inputValue
        ? this.Article.tag.push({ name: inputValue, type: tagType(inputValue) })
        : "";
      inputValue == "作品" ? (this.dialogFormVisible = true) : "";
      this.inputVisible = false;
      this.inputValue = "";
    },
    handleSuccess(response, file) {
      console.log(response, file);
      this.Article.image = response.url;
    },
  },
};
</script>

<style scoped>
.editor-content {
  margin-top: 20px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

